.screenshot {
  border: 1px solid var(--color-hairline);
  // This ensures images are scaled to the exact size specified by the
  // width attribute, preventing HiDPI screenshots from being blurry:
  //  <img src="800x500.png" width="400" class="screenshot">
  box-sizing: content-box;
  padding: get-size(100);
}

.screenshot--filled {
  background-color: var(--color-code-bg);
  // This ensures image size fits to content width with padding(16 * 2)
  // while specifying `box-sizing: content-box;` in .screenshot
  max-width: calc(100% - 2 * #{get-size(400)});
  padding: get-size(400);
}
